<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Apple Pay Example</title>
		<!-- <script src="https://applepay.apple.com/js/applepay.js" type="text/javascript"></script> -->
		<script crossorigin src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js">
		</script>

		<script
			src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD&buyer-country=US&merchant-id=SUB_MERCHANT_ID&components=applepay">
		</script>
		<script src="https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js"></script>
		<style>
		</style>
	</head>
	<body>
		<div id="applepay-container"></div>

		<script>
			if (!window.ApplePaySession) {
				console.error('This device does not support Apple Pay');
			}
			if (!ApplePaySession.canMakePayments()) {
				console.error('This device is not capable of making Apple Pay payments');
			}
			const applepay = paypal.Applepay();
			applepay.config()
				.then(applepayConfig => {
					if (applepayConfig.isEligible) {
						document.getElementById("applepay-container").innerHTML =
							'<apple-pay-button id="btn-appl" buttonstyle="black" type="buy" locale="en">';
					}
				})
				.catch(applepayConfigError => {
					console.error('Error while fetching Apple Pay configuration.');
				});
		</script>
	</body>
</html>